<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form :form="model" layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="通知类型">
              <a-select
                placeholder="请选择通知类型"
                @change="msgTypeChange"
                v-model="model.msgType"
              >
                <a-select-option value="进度通知"> 进度通知 </a-select-option>
                <a-select-option value="动账通知"> 动账通知 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="通知状态">
              <a-select
                placeholder="请选择通知状态"
                @change="readFlagChange"
                v-model="model.readFlag"
              >
                <a-select-option value="0"> 未读 </a-select-option>
                <a-select-option value="1"> 已读 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                style="margin-left: 8px"
                >重置</a-button
              >
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- <div class="table-operator">
      <a-button type="primary" @click="readAll" icon="book">全部标注已读</a-button>
    </div> -->

    <a-table
      ref="table"
      size="default"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <span slot="action" slot-scope="text, record">
        <a @click="showAnnouncement(record)">查看</a>
      </span>
    </a-table>
    <a-drawer
      title="详情"
      :width="472"
      placement="right"
      :closable="false"
      :visible="messageShow"
      @close="onClose"
      :maskClosable="true"
    >
      <a-form :form="messageForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
        <a-form-item label="通知标题">
          <div>{{ messageForm.title }}</div>
        </a-form-item>
        <a-form-item label="通知内容">
          <div>{{ messageForm.msgContent }}</div>
        </a-form-item>
        <a-form-item label="通知时间">
          <div>{{ messageForm.createTime }}</div>
        </a-form-item>
      </a-form>
    </a-drawer>
  </a-card>
</template>

<script>
import { jbdMsgNotice, JbdMsgNoticeRead } from "@/api/message";

export default {
  name: "UserAnnouncementList",
  data() {
    return {
      model: {},
      messageForm: {},
      columns: [
        {
          title: "通知类型",
          align: "center",
          dataIndex: "msgType",
        },
        {
          title: "发布人",
          align: "center",
          dataIndex: "createBy",
        },
        {
          title: "通知时间",
          align: "center",
          dataIndex: "createTime",
        },
        {
          title: "阅读状态",
          align: "center",
          dataIndex: "readFlag",
          customRender: function (text) {
            if (text == "0") {
              return "未读";
            } else if (text == "1") {
              return "已读";
            } else {
              return text;
            }
          },
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      loading: false,
      openPath: "",
      formData: "",
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      userId: 0,
      messageShow: false, // 详情弹框
    };
  },
  mounted() {
    this.userId = JSON.parse(window.localStorage.getItem("pro__Login_Userinfo")).value.id;
    this.getList(this.userId);
  },
  methods: {
    async getList() {
      const params = {
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
        userId: this.userId,
        msgType: this.model.msgType,
        readFlag: this.model.readFlag,
      };
      const res = await jbdMsgNotice(params);
      if (res.code == 200) {
        if (res.result && res.result.records) {
          this.dataSource = res.result.records;
          this.ipagination.total = res.result.total;
        }
      }
    },
    searchQuery() {
      this.getList();
    },
    searchReset() {
      this.$set(this.model, "msgType", "");
      this.$set(this.model, "readFlag", "");
      this.getList();
    },
    handleTableChange(e) {
      this.ipagination.current = e.current;
      this.ipagination.pageSize = e.pageSize;
      this.getList();
    },
    async showAnnouncement(record) {
      const res = await JbdMsgNoticeRead({ id: record.id });
      if(res.code == 200&& res.result ){
      this.messageForm = res.result;
      this.messageShow = true;
      }
    },
    onClose() {
      this.messageShow = false;
      this.getList()
    },
    msgTypeChange(value) {
      this.$set(this.model, "msgType", value);
    },
    readFlagChange(value) {
      this.$set(this.model, "readFlag", value);
    },
  },
};
</script>
<style scoped>
.ant-card-body .table-operator {
  margin-bottom: 18px;
}
.anty-row-operator button {
  margin: 0 5px;
}
.ant-btn-danger {
  background-color: #ffffff;
}
z .ant-modal-cust-warp {
  height: 100%;
}
.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto;
}
.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden;
}
</style>
